<!DOCTYPE html>
<html
  lang="en"
  xmlns:th="http://www.thymeleaf.org"
  th:replace="~{modules/layout :: html(title = ${theme.config.photos.photos_title ?: '我的图库'} + '-' + ${site.title},htmlType = photos,header = null,leftSidebar = true,content = ~{::content}, head = null, footer = null)}"
>
  <th:block th:fragment="content">
    <body>
      <div id="Joe">
        <th:block th:replace="~{modules/macro/navbar :: navbar}" />
        <div
          class="joe_container joe_main_container page-photos"
          th:classappend="|${theme.config.theme.enable_show_in_up ? 'animated showInUp' : ''} ${theme.config.aside.aside_position == 'left' ? 'revert' : ''}|"
        >
          <div class="joe_main">
            <div class="joe_photos__type">
              <div class="joe_photos__type-title">
                <i class="joe-font joe-icon-tupian"></i>&nbsp;
                [[${theme.config.photos.photos_title ?: '我的图库'}]]
              </div>
              <nav class="joe_photos__filter">
                <ul>
                  <li data-sjslink="all">
                    <a>全部</a>
                  </li>
                  <th:block th:each="group : ${groups}">
                    <li th:data-sjslink="${group.metadata.name}">
                      <a>[[${group.spec.displayName}]]</a>
                    </li>
                  </th:block>
                </ul>
              </nav>
            </div>
            <div class="wrapper">
              <div id="sortable" class="sjs-default">
                <div th:data-sjsel="${photo.spec.groupName}" th:each="photo : ${photoFinder.listAll()}">
                  <div class="card">
                    <a class="item animated wow jg-entry" th:href="${photo.spec.url}" data-fancybox="gallery">
                      <img
                        class="card__picture"
                        th:data-src="${photo.spec.url}"
                        th:src="@{/assets/img/lazyload.gif}"
                        th:alt="${photo.spec.displayName}"
                      />
                    </a>
                    <th th:if="${theme.config.photos.enable_photos_desc}">
                      <div class="card-infos">
                        <h2 class="card__title">[[${photo.spec.displayName}]]</h2>
                        <p class="card__text">
                          [[${photo.spec.description}]]
                        </p>
                      </div>
                    </th>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <th:block th:if="${theme.config.aside.enable_aside} and ${theme.config.aside.enable_photos_aside}">
            <th:block th:replace="~{modules/common/aside :: aside}" />
          </th:block>
        </div>
        <th:block th:replace="~{modules/common/actions :: actions}" />
        <th:block th:if="${theme.config.footer.enable_footer}">
          <th:block th:replace="~{modules/common/footer :: footer}" />
        </th:block>
      </div>
      <th:block th:replace="~{modules/macro/tail :: tail}" />
    </body>
  </th:block>
</html>
